<template>
  <section class='f-card-detail'>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="overflow-y: auto;flex:1">
      <section class="f-phone-box">
        <p class="f-iccid">{{formData.code || '--'}}
          <img src="@/assets/icons/btn_icon_copy_white.png" alt="" @click="handleCopy(formData.code)">
        </p>
        <section class="f-btn-box">
          <p @click="pageJump('/meal')">订购套餐</p>
        </section>
      </section>

      <section class="f-meal-box">
        <p class="f-title">已订套餐({{usablePacks.length}})</p>

        <section v-for="(item,index) in usablePacks" :key="index">
          <section v-if="item.useStatus == 1" class="f-meal">
            <p class="f-name">{{item.packageName}} </p>
            <div class="f-box-01 f-mt-10">
              <p>已使用{{(100-((item.totalFlow - item.usedFlow)/item.totalFlow*100)).toFixed(2)}}%</p>
              <p>剩余{{((item.totalFlow - item.usedFlow)/item.totalFlow*100).toFixed(2)}}%</p>
            </div>
            <div class="f-chart">
              <p class="f-chart-inner" :style="{'width': (item.totalFlow - item.usedFlow)/item.totalFlow*100 + '%'}"></p>
            </div>
            <div class="f-box-02">
              <p>{{ bytesToSize(item.totalFlow - item.usedFlow)}}</p>
              <p>{{ bytesToSize(item.totalFlow) }}</p>
            </div>
            <div class="f-box-03">{{getDateTime(item.startTime)[8]}}至{{getDateTime(item.expireTime)[8]}}有效</div>
          </section>

          <section v-else class="f-meal-un">
            <div>
              <p>{{item.packageName}} </p>
              <p style="font-size: 10px;color: #FD6A56;margin-top: 6px;">{{item.useStatus == 2? '已失效': '未激活'}}</p>
            </div>
            <!-- <van-button class="f-btn" type="primary" size="small" round @click="setYklPackActivate(item)">去激活</van-button> -->
          </section>
        </section>
      </section>

      <section class="f-opeartion-box">
        <p class="f-title">其它功能</p>
        <ul class="f-ul">
          <!-- <li @click="pageJump('/internetRecord')">
            <img src="@/assets/icons/icon_traffic_billing.png" alt="">
            <p>流量账单</p>
          </li> -->
          <li @click="pageJump('/outChina/rechargeRecord')">
            <img src="@/assets/icons/icon_recharge_record.png" alt="">
            <p>订购记录</p>
          </li>
        </ul>
      </section>
    </van-pull-refresh>

  </section>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { successDeal, bytesToSize, getDateTime, setStore, getStore, errorDeal } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'
import { showLoadingToast, closeToast, showToast } from 'vant';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      formData: getStore('cardInfo') || {},

      priority: {
        'base': '单次包',
        'month': '每月包',
        'rate': '累计包',
        'quicken': '提速包',
        'addi': '加油包',
        'holiday': '假日包',
      },

      isConnect: false,
      currentIccid: "",
      currentOperatorName: "",

      refreshing: false,

      yklIccid: '',
      usablePacks: [],
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '国际服务详情',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: ''
      });

      getCardInfo()
      getCardCorrelation()
    })

    const getCardInfo = () => {
      api.cardInfo({ code: route.query.code }).then(res => {
        state.formData = res.data
      })
    }

    // 获取卡信息
    const getCardCorrelation = () => {
      let json = {
        "code": route.query.code,
        "iccid": "",
        "phone": ""
      }
      api.cardCorrelation(json).then(res => {
        state.yklIccid = res.data.yklIccid
        getPacks()
      })
    }

    // 获取订购套餐
    const getPacks = () => {
      let json = {
        "iccid": state.yklIccid,
      }
      api.yklPacks(json).then(res => {
        if (res.data.usablePacks && res.data.usablePacks.length) {
          state.usablePacks = res.data.usablePacks
        }
      })
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功')
      }
      document.body.removeChild(input);
    }

    const pageJump = (path) => {
      setStore('CURRENT_CODE', { code: route.query.code })
      router.push({
        path,
        query: {
          flag: true,
          code: route.query.code,
          mealType: 2
        }
      })
    }

    const onRefresh = () => {
      getPacks()
      if (state.refreshing) {
        state.refreshing = false;
      }
    };

    return {
      ...toRefs(state),
      bytesToSize,
      getDateTime,
      handleCopy,
      pageJump,
      onRefresh,
    }
  }
}
</script>
  
<style lang='scss' scoped>
.f-card-detail {
  padding: 14px;
  display: flex;
  flex-direction: column;
  .f-phone-box {
    margin-left: 2px;
    background-image: url("@/assets/imgs/pic_bg_details.png");
    background-size: 100% 100%;
    width: 344px;
    height: 137px;
    padding: 14px 19px 0 19px;
    position: relative;
    .f-iccid {
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      img {
        width: 14px;
        height: 14px;
        margin-left: 10px;
      }
    }
    .f-box {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 16px;
      margin-left: 1px;
      .f-flow {
        font-weight: 500;
        font-size: 16px;
        color: #fefefe;
      }
    }
    .f-btn-box {
      position: absolute;
      left: 0;
      bottom: 7px;
      width: 337px;
      height: 34px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 0 0 6px 6px;
      display: flex;
      align-items: center;
      p {
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 13px;
        color: #ffffff;
      }
    }
  }
  .f-meal-box {
    background: #ffffff;
    border-radius: 13px;
    padding: 17px 15px;
    margin-top: 22px;
    .f-select-box {
      font-weight: 400;
      font-size: 14px;
      color: #424242;
      display: flex;
      align-items: center;
      margin-left: 10px;
      margin-bottom: 23px;
      p {
        margin-right: 43px;
        border-bottom: 2px solid #ffffff;
        padding-bottom: 3px;
      }
      .f-select {
        font-weight: 500;
        font-size: 14px;
        color: #304eee;
        border-bottom: 2px solid #304eee;
      }
    }
    .f-meal {
      background: rgba(132, 167, 255, 0.3);
      border-radius: 13px;
      padding: 18px 13px;
      margin-bottom: 14px;
      .f-name {
        font-weight: 400;
        font-size: 12px;
        color: #424242;
      }
      .f-chart {
        width: 100%;
        height: 5px;
        background: #ffffff;
        border-radius: 6px;
        position: relative;
        margin: 5px 0 5px 0;
        .f-chart-inner {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 5px;
          border-radius: 6px;
          background: linear-gradient(270deg, #c6379c 0%, #3c65aa 100%);
        }
      }
      .f-box-01 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 300;
        font-size: 8px;
        color: #666666;
      }
      .f-box-02 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 12px;
        color: #000000;
        margin-bottom: 15px;
      }
      .f-box-03 {
        text-align: right;
        font-weight: 300;
        font-size: 9px;
        color: #424242;
      }
    }
    .f-meal-un {
      background: rgba(132, 167, 255, 0.3);
      border-radius: 13px;
      font-weight: 400;
      font-size: 12px;
      color: #424242;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 23px 13px;
      margin-bottom: 14px;
      .f-btn {
        padding: 6px 15px;
      }
    }
    .f-meal-disabled {
      background: rgba(194, 189, 222, 0.3);
      border-radius: 13px;
      padding: 23px 13px;
      margin-bottom: 14px;
      font-weight: 400;
      font-size: 12px;
      color: #424242;
    }
    .f-title {
      font-weight: 500;
      font-size: 14px;
      color: #424242;
      margin-bottom: 28px;
    }
  }
  .f-opeartion-box {
    width: 347px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 13px;
    margin-top: 13px;
    padding-bottom: 8px;
    .f-title {
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      padding: 17px 0 16px 14px;
    }
    .f-ul {
      display: flex;
      align-items: center;
      li {
        font-weight: 500;
        font-size: 13px;
        color: #000000;
        text-align: center;
        width: 100px;
        img {
          width: 43px;
          height: 43px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>